<template>
  <el-form
    :label-position="labelPosition"
    ref="formRef"
    :inline="true"
    :model="formDataObj"
    :show-message="false"
  >
    <div class="NBData">
      <div class="mask"></div>
      <div class="nbData">
        <!-- 顶部层 -->
        <div>
          <p>{{ title }}资料</p>
          <i class="el-icon-close" @click="closeIconClick"></i>
        </div>
        <!-- 第二层容器 -->
        <div style="padding: 15px">
          <div class="inp">
            <!-- 是否显示会员 -->
            <div class="member">
              <span>是否会员</span>
              <el-switch
                v-model="swithSelectValue"
                active-color="#017AFF"
                inactive-color="#dcdfe6"
                :disabled="disabled"
                @change="swithSelectValueChange"
              >
              </el-switch>
              <!-- 卡别 -->
              <div class="card_class" v-if="swithSelectValue">
                <span>卡别</span>
                <el-select
                  v-model="memberPullSelectValue"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in memberPullSelectValueList"
                    :key="item.id"
                    :label="item.cardName"
                    :value="item.cardName"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <!-- 选择框区域，选择flex布局 -->
            <div class="select_container">
              <div class="info">
                <!-- 第一行框 -->
                <div>
                  <span>客户编号</span>
                  <el-input v-model="customerIdInputValue" disabled></el-input>
                  <span>VIP卡号</span>
                  <el-input
                    v-model.number="vipCardNumberInputValue"
                    placeholder="请输入手机号码"
                  ></el-input>
                  <span>客户简称</span>
                  <el-input v-model="clientForShortInputValue"></el-input>
                  <span>折数</span>
                  <el-input
                    v-model.number="DiscountNumberInputValue"
                    type="number"
                    class="no_margin_right"
                    @change="disNumberInputValueChange"
                    :disabled="!swithSelectValue"
                  ></el-input>
                </div>
                <!-- 第二行框 -->
                <div style="margin-top: 10px">
                  <span>所属地区</span>
                  <el-select
                    v-model="toTheAreaPullSelectValue"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in toTheAreaPullSelectValueList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <span style="margin-left: 10px">营业员</span>
                  <el-select v-model="tradeAssistantPullSelectValue" clearable>
                    <el-option
                      v-for="item in tradeAssistantPullSelectValueList"
                      :key="item.id"
                      :label="item.personnelName"
                      :value="item.personnelNo"
                    >
                    </el-option>
                  </el-select>
                  <span style="margin-left: 10px"> 介绍人</span>
                  <el-input
                    v-model="introducerInputValue"
                    placeholder="请输入介绍人卡号"
                  ></el-input>
                  <span>生日</span>
                  <el-select
                    v-model="birthdayPullSelectValue"
                    clearable
                    class="no_margin_right"
                  >
                    <el-option
                      v-for="item in monthPullSelectValueList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <!--  -->
                </div>
                <!-- 第三行 -->
                <div style="margin-top: 10px">
                  <span style="margin-left: 30px">积分</span>
                  <el-input
                    v-model.number="pointsInputValue"
                    :disabled="isForbiddenJiFenInput"
                  ></el-input>
                  <span>喜欢颜色</span>
                  <el-input v-model="likeColorInputValue"></el-input>
                  <span>合适尺码</span>
                  <el-input v-model="suitableSizeInputValue"></el-input>
                  <span>备注</span>
                  <el-input
                    v-model="commentsInputValue"
                    class="no_margin_right bei_zhu"
                  ></el-input>
                </div>
                <!-- 第四行 -->
                <div style="margin-top: 10px">
                  <span style="margin-left: 31px">地址</span>
                  <el-input
                    v-model="addressInputValue"
                    class="address_input"
                  ></el-input>
                  <span style="margin-left: 31px">密码</span>
                  <el-input
                    class="password"
                    v-model="passwordInputValue"
                    placeholder="请输入充值/支付密码"
                  ></el-input>
                  <span>确认密码</span>
                  <el-input
                    v-model="confirmPasswordInputvalue"
                    placeholder="请再次输入密码"
                    class="no_margin_right comfire_password"
                  ></el-input>
                </div>
              </div>
            </div>
            <!------------  -->
          </div>
          <!-- 表格层 -->
          <el-table
            :data="VipFilingTableData"
            style="width: 100%; margin: 15px 0"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '36px' }"
          >
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="phone" label="VIP"></el-table-column>
            <el-table-column prop="cardNo" label="卡别"></el-table-column>
            <el-table-column
              prop="addressArea"
              label="所属地区"
            ></el-table-column>
            <el-table-column prop="discount" label="折数"></el-table-column>
            <el-table-column
              prop="birthdayMonth"
              label="生日"
            ></el-table-column>
            <el-table-column
              prop="personnelName"
              label="营业员"
            ></el-table-column>
            <el-table-column prop="introducer" label="介绍人"></el-table-column>
            <el-table-column
              prop="addressDetail"
              label="地址"
            ></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
          <div style="text-align: end">
            <el-button @click="closeIconClick">取消</el-button>
            <el-button type="primary" plain @click="keepBtnClick"
              >保存</el-button
            >
            <el-button @click="handleContinueEnteringBtnClick" type="primary"
              >继续录入</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script>
import { getShop, postBuild } from '../../../../network/shop'
import { provincea } from '../../../../config/address'

// 基本页面接口的引入
// import { get_trade_assistant_dataApi } from '../../../../request/page_base_api/page_base_api.js'
// 页面
import {
  get_trade_assistant_dataApi,
  add_vip_customer_dataApi,
  get_cardType_data_api
} from '../../../../request/store/store_baseInfo_request.js'
//
import { monthList } from '../../../../config/base_data.js'
export default {
  data() {
    return {
      // 当前选中的营业员名字
      currentAssistObj: {},
      // 保存
      keepStr: '',
      labelPosition: 'right',
      // 表单对象
      formDataObj: {},
      // false代表不禁用， true代表禁用
      disabled: false,
      // 控制积分是否被禁用, true是禁用
      isForbiddenJiFenInput: false,
      // 控制‘继续录入’按钮是否显示
      isShowContinueBtn: true,
      // 点击的是 ‘保存’
      isClick: '不是点击保存按钮',
      // 表格的数据
      VipFilingTableData: [],
      // 是否显示卡别下拉框isShowCardClass和swithSelectValue初始值要一样
      // isShowCardClass: true,
      // swith开关选择的值
      swithSelectValue: true,
      // 卡别下拉框选中的值和数组
      memberPullSelectValue: '',
      memberPullSelectValueList: [],
      // 客户编号展示的值
      customerIdInputValue: '',
      // 表单的数据对象

      // vip卡号输入的值
      vipCardNumberInputValue: '',
      // 客户简称输入的值
      clientForShortInputValue: '',
      // 打折数输入的值
      DiscountNumberInputValue: '',

      // 客户编号输入的值
      customerIdInputValue: '',

      // 所属地区的选中的值和数组
      toTheAreaPullSelectValue: '',
      toTheAreaPullSelectValueList: provincea,
      // 营业员下拉选中的值和数组
      tradeAssistantPullSelectValue: '',
      tradeAssistantPullSelectValueList: [],
      // 介绍人输入的值
      introducerInputValue: '',
      // 生日下拉选中的值和数组(父组件传过来)
      birthdayPullSelectValue: '',
      monthPullSelectValueList: monthList,
      // 积分输入的值
      pointsInputValue: '',
      // 喜好的颜色输入的值
      likeColorInputValue: '',
      // 合适尺码输入的值
      suitableSizeInputValue: '',
      // 备注输入的值
      commentsInputValue: '',
      // 地址详情输入的值
      addressInputValue: '',
      // 密码输入的值
      passwordInputValue: 123456,
      // 确认密码输入的值
      confirmPasswordInputvalue: 123456,
      // 这里是表单的验证规则
      title: '新建',
      VipFilingTableData: []
      // 原来的
    }
  },
  created() {
    // 获取卡别数据
    this.get_cardType_data()
    // 获取营业员的数据
    this.get_trade_assistant_dataApi()
    //获取客户编号
    getShop().then((res) => {
      console.log(res.data)
      this.customerIdInputValue = res.data.data.no
    })
    this.areaList = provincea
  },
  methods: {
    // 是否会员swith发生改变
    swithSelectValueChange(bool) {
      console.log(this.currentAssistObj)
      if (!bool) {
        this.DiscountNumberInputValue = 10
      } else {
        this.DiscountNumberInputValue = ''
      }
    },
    // 折数输入的值发生改变的时候，触发的函数
    disNumberInputValueChange(val) {
      // console.log(val)
      if (val <= 0) {
        this.$message.warning('折数只能在 1- 10 之间,最小值是 1')
        this.DiscountNumberInputValue = 1
      }
      if (val > 10) {
        this.$message.warning('折数只能在 1- 10 之间,最大值是 10')
        this.DiscountNumberInputValue = 10
      }
    },
    // 获取卡别的数据
    async get_cardType_data() {
      const { data: res } = await get_cardType_data_api()
      console.log(res, 'get_cardType_data')
      if (res.code != 200) return
      this.memberPullSelectValueList = res.data
    },
    // 获取所以营业员的数据
    async get_trade_assistant_dataApi() {
      const paramsObj = {
        directSaleNo: this.$store.state.currentStoreData.no
      }
      const { data: res } = await get_trade_assistant_dataApi(paramsObj)
      console.log(res, '获取所以营业员的数据')
      if (res.code !== 200) return
      this.tradeAssistantPullSelectValueList = res.data
      // 如果返回来的数据没有，直接return
      // if (!res || res.code !== 200 || res.data.length < 1) return
      // // 遍历返回来的数组，拼接成下拉框要的数组,是常用类型数据，不能改变原来数组,所以，只能遍历一个，就往tradeAssistantPullSelectValueList拼接一个
      // res.data.forEach((item) => {
      //   this.tradeAssistantPullSelectValueList.push({
      //     label: item
      //   })
      // })
      // console.log(this.tradeAssistantPullSelectValueList);
    },
    // 关闭icon被点击的时候，触发的函数
    closeIconClick() {
      this.$emit('closeNewAddVipDialog')
    },
    /*
         点击继续录入的时候，触发的函数
    */
    async handleContinueEnteringBtnClick() {
      // 这个是点击新建的时候，后端需要的参数对象
      const paramsObj = {
        // 是否是会员也要自己传过情，否则后端默认都是会员1(类型（0散客 1会员）)
        type: this.swithSelectValue && this.memberPullSelectValue ? 1 : 0,
        // 不知道这个是用啥字段，先用cardNo,判断是否隐藏再决定取值
        // cardNo:
        //   this.swithSelectValue && this.memberPullSelectValue
        //     ? this.memberPullSelectValue
        //     : '', // 卡别编号 （什么数字代表铂金？代表黄金？）
        cardNo: this.swithSelectValue ? this.memberPullSelectValue : '',
        phone: this.vipCardNumberInputValue, // 手机号码（vip卡号）
        name: this.clientForShortInputValue, // 客户简称
        discount: this.DiscountNumberInputValue, // 折数
        addressArea: this.toTheAreaPullSelectValue, // 地址区域（所属地区）
        personnelNo: this.tradeAssistantPullSelectValue, // 职员编号(营业员)
        introducer: this.introducerInputValue, // 介绍人（VIP会员）
        birthdayMonth: this.birthdayPullSelectValue, // 生日（月）
        integralNumber: this.pointsInputValue, // 积分
        likeColor: this.likeColorInputValue, // 喜好的颜色
        suitableSize: this.suitableSizeInputValue, // 适合尺码
        remark: this.commentsInputValue, // 备注
        addressDetail: this.addressInputValue, // 地址详情（地址）
        password: this.passwordInputValue, // 密码
        affirmPassword: this.confirmPasswordInputvalue // 确认密码
      }
      // console.log(paramsObj);
      // 判断输入的两次密码是否相等,不等直接return
      if (this.passwordInputValue !== this.confirmPasswordInputvalue) {
        return this.$message.warning('两次输入的密码不一致！')
      }
      // 选中营业员的话，那么通过营业员编号，找到那个营业员名字
      if (this.tradeAssistantPullSelectValue) {
        this.currentAssistObj = this.tradeAssistantPullSelectValueList.find(
          (item) => {
            return item.personnelNo === this.tradeAssistantPullSelectValue
          }
        )
        // console.log(this.currentAssistName, 'this.currentAssistName')
      }
      // 可以在这里发起ajax请求
      // console.log("成功发送请求");
      // 如果点击的是保存，那么发起ajax请求成功之后，应该要关闭对话框
      const { data: res } = await add_vip_customer_dataApi(paramsObj)
      console.log(res, 'add_vip_customer_dataApi')

      // 发起数据失败，直接return
      if (res.code !== 200) return
      // 创建成功之后，再拼接表格数据,输入一个，收集拼接一个
      // 并且要更新父组件下拉框的父组件
      this.$emit('updataVipList')
      this.VipFilingTableData.push({
        phone: paramsObj.phone,
        cardNo: paramsObj.cardNo,
        discount: paramsObj.discount,
        integralNumber: paramsObj.integralNumber,
        birthdayMonth: paramsObj.birthdayMonth,
        personnelName: this.currentAssistObj.personnelName,
        addressArea: paramsObj.addressArea,
        introducer: paramsObj.introducer,
        addressDetail: paramsObj.addressDetail,
        remark: paramsObj.remark
      })
      // 点击的是，保存的话，要直接关闭dialog
      if (this.keepStr === '保存') {
        this.closeIconClick()
      }
    },
    // 保存被点击的时候，触发的函数
    keepBtnClick() {
      this.keepStr = '保存'
      this.handleContinueEnteringBtnClick()
    }
  }
}
</script>
<style lang="less" scoped>
.select_container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  .info {
    margin-bottom: 8px;
    span {
      margin-right: 7px;
    }
  }
}
// 加了表单验证项之后，必须要修改的样式
/deep/.el-form-item {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: unset;
  .el-form-item__label {
    width: unset !important;
    padding: 0;
    span {
      font-size: 16px;
    }
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
// 地址框的样式
.big_input {
  .address_input {
    width: 437px;
    margin-right: 0;
  }
}
.password {
  font-size: 13px;
}
// 去掉最右边的框的边距
.no_margin_right {
  margin-right: 0;
}
// 是否显示会员
.member {
  display: flex;
  align-items: center;
  // 不给高度就是自适应，那么显示和隐藏就会出现抖动
  height: 32px;
  span {
    margin-right: 6px;
  }
  .el-switch {
    margin-right: 30px;
  }
}
// 统一为这个页面的select框设置下拉框的样式
.el-select {
  width: 160px;
  height: 32px;
  /deep/.el-input {
    height: 100%;
    .el-input__inner {
      height: 100%;
    }
  }
  /deep/.el-input__icon {
    line-height: unset;
  }
}
// 统一为输入框设置样式
.el-input {
  width: 160px;
  height: 32px;
  /deep/.el-input__inner {
    height: 100%;
  }
}
// 统一设置input框和select框的右边距离
.el-input,
.el-select {
  margin-right: 20px;
}
// 表单项
.info_one {
  display: flex;
}
// 原来的
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 99;
}
.nbData {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
.nbData > div:first-child {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: #f4f4f4;
  font-weight: 700;
}
.inp > div {
  display: flex;
}
.inp > div p {
  line-height: 30px;
  display: inline-block;
  white-space: nowrap;
  width: 70px;
  text-align: end;
  margin-right: 6px;
}
.wd {
  width: 160px;
  height: 30px;
}
</style>

<style>
.nbData .inp .el-input__inner {
  height: 30px;
}
</style>
